<template>
    <div class="registered">
        <Header :loginShowOrNot="shownot" :regist="registText"></Header>
        <div class="content">
            <div class="registCon">
                <h1>注册</h1>
                <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" size="medium">
                    <el-form-item prop="tel">
                        <el-input type="tel" v-model="ruleForm2.tel" auto-complete="off" placeholder="请输入电话号码"
                                  :maxlength="11"></el-input>
                    </el-form-item>
                    <el-form-item prop="pass">
                        <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"
                                  placeholder="密码由8-20个字符组成" :maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item prop="checkPass" class="imgCheckPass">
                        <el-input v-model="ruleForm2.checkPass" auto-complete="off" placeholder="请输入验证码"></el-input>
                        <img :src="imgCode" alt="">
                    </el-form-item>
                    <el-form-item prop="smscode" class="smscode">
                        <el-input v-model="ruleForm2.smscode" placeholder="请输入短信验证码"></el-input>
                        <button :class="{needClick:contT}" @click="contTime" v-text="cuontTimeText"></button>
                    </el-form-item>
                    <el-form-item  prop="invitertel" >
                        <el-input v-if="defaultShow" type="tel" v-model="ruleForm2.invitertel" auto-complete="off" placeholder="邀请人手机号"
                                  :maxlength="11"></el-input>
                        <p v-else class="placeblank" @click="inviterShow">邀请人手机号（选填）</p>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm2')">注册</el-button>
                    </el-form-item>
                   <el-form-item  class="movel" :error="protocalMg">
                       <el-checkbox  v-model="checked">我已阅读并同意<router-link to="">《钱内助注册协议》</router-link></el-checkbox>
                   </el-form-item>
                </el-form>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
    import Footer from "./common/Foot";
    import Header from "./common/Head";

    const reg = /^0?1[3|4|5|8|7][0-9]\d{8}$/;
    const regpass = /^[\s\S]{8,20}$/;
    let acptsmscode = "1234",
        verifcode = "x6ow";
    export default {
        components: {
            Footer,
            Header
        },
        data() {
            let checksmscode = (rule, value, callback) => {
                if (value !== '' && value !== acptsmscode) {
                    callback(new Error('短信验证码填写错误!'));
                    this.btsubmit = false;
                } else if (value === acptsmscode && value.length === 4) {
                    callback();
                    if(this.defaultShow){
                        this.$refs.ruleForm2.validateField('invitertel');
                    }else{
                        if(!this.checked){
                            this.protocalMg = "请勾选《钱内助注册协议》";
                        }else if(this.checked){
                            this.protocalMg = "";
                        }
                        if(this.btsubmit && this.checked){
                            alert("submit1");
                        }
                    }
                }else{
                    this.btsubmit = false;
                }
            };
            let validatePass = (rule, value, callback) => {
                if (((value.length < 8 || value.length > 20) && value.length > 0) && !regpass.test(value)) {
                    callback(new Error('密码由8-20个字符组成'));
                    this.btsubmit = false;
                } else if (value.length > 7 && value.length < 21 && regpass.test(value)) {
                    callback();
                    this.$refs.ruleForm2.validateField('checkPass');
                }else{
                    this.btsubmit = false;
                }
            };
            let validatePass2 = (rule, value, callback) => {
                if (value !== "" && value.toLocaleLowerCase() !== verifcode.toLocaleLowerCase()) {
                    callback(new Error('请输入正确的验证码'));
                    this.btsubmit = false;
                } else if (value.toLocaleLowerCase() === verifcode.toLocaleLowerCase() && value.length === 4){
                        callback();
                        this.$refs.ruleForm2.validateField('smscode');
                }else{
                    this.btsubmit = false;
                }
            };
            let validatetel = (rule, value, callback) => {
                if ((value.length !== 11 && value.length > 0) || !reg.test(value)) {
                    callback(new Error('请输入正确的手机号码'));
                    this.btsubmit = false;
                } else if (value.length === 11 && reg.test(value)) {
                    callback();
                    this.$refs.ruleForm2.validateField('pass');
                }
            };
            let validateinviter = (rule, value, callback) => {
                if ((value.length !== 11 && value.length > 0) && !reg.test(value)) {
                    callback(new Error('请输入正确的手机号码'));
                    this.btsubmit = false;
                } else if (value.length === 11 && reg.test(value)) {
                    callback();
                }else{
                    if(!this.checked){
                        this.protocalMg = "请勾选《钱内助注册协议》";
                    }else if(this.checked){
                        this.protocalMg = "";
                    }
                    if(value ==='' && this.btsubmit && this.checked){
                       alert("submitConinviter");
                   }
                }
            };
            return {
                contT:true,
                checked: true,
                protocalMg: "",
                registText:'注册页面',
                defaultShow: false,
                shownot: true,
                cuontTime: 30,
                cuontTimeText: "获取验证码",
                inputText: '',
                btsubmit:false,
                ruleForm2: {
                    tel: '',
                    pass: '',
                    checkPass: '',
                    smscode: '',
                    invitertel: '',
                    protocol:true,
                    imgCode: ''
                },
                rules2: {
                    tel: [
                        {validator: validatetel, trigger: 'blur'}
                    ],
                    invitertel:[
                        {validator: validateinviter, trigger: 'blur'}
                    ],
                    pass: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    smscode: [
                        {validator: checksmscode, trigger: 'blur'}
                    ]
                }
            };

        },
        created() {
            this.imgCode = require('../assets/images/imgCode.png')
        },
        methods: {
            submitForm(formName) {
                    this.btsubmit = true;
                    this.$refs[formName].validateField("tel");
                    this.btsubmit = false;
            },
            contTime() {
                let self = this;
                let num = setInterval(function () {
                    self.cuontTime = --self.cuontTime;
                    self.contT = false;
                    self.cuontTimeText = `${self.cuontTime}s后重新获取`;
                    if (self.cuontTime <= 0) {
                        self.cuontTime = 30;
                        self.cuontTimeText = "获取验证码";
                        self.contT = true;
                        clearInterval(num);
                    }
                }, 1000)
            },
            //vue事件默认不会冒泡，所以在行内绑定事件的时候需要注意
            inviterShow() {
                this.defaultShow = true;
            }
        }
    }
</script>
<style lang="scss" scoped>
    .registered {
        color: #333;
        min-width: 1200px;
        .header {
            width: 1200px;
            margin: 0 auto;
            padding: 12px 0;
            .hdfl1 {
                width: 149px;
                height: 57px;
                padding-right: 30px;
                position: relative;
                background: url("../assets/images/registerlogo.png") no-repeat left center;
                span {
                    position: absolute;
                    font-size: 13px;
                    right: 30px;
                    bottom: 4px;
                }
                &:after {
                    content: "";
                    position: absolute;
                    width: 2px;
                    height: 34px;
                    background-color: #dfdfdf;
                    right: -2px;
                    top: 12px;
                }
            }
            .hdfl2 {
                font-size: 20px;
                margin: 14px 0 0 32px;
            }
            .fr {
                font-size: 17px;
                margin-top: 19px;
                a {
                    color: #ff6235;
                }
            }
        }
        .content {
            height: 600px;
            background: url("../assets/images/registeredBg.png") no-repeat center top;
            .registCon {
                width: 380px;
                margin: 0 auto;
                position: relative;
                left: 420px;
                top: 35px;
                background-color: #fff;
                height: 530px;
            }
            h1 {
                font-size: 21px;
                text-align: center;
                padding: 30px 0 45px 0;
                font-weight: normal;
            }
            .el-form {
                width: 290px;
                margin: 0 auto;
                .imgCheckPass {
                    position: relative;
                    img {
                        position: absolute;
                        right: 0;
                        bottom: 7px;
                        width: 90px;
                        height: 30px;
                        border: 1px solid #dfdfdf;
                        &:hover {
                            cursor: pointer;
                        }
                    }
                }
                .smscode {
                    position: relative;
                    button {
                        width: 98px;
                        border: 1px solid #dfdfdf;
                        position: absolute;
                        right: 0;
                        bottom: 7px;
                        font-size: 13px;
                        color: #999;
                        padding: 5px 0;
                        background-color: #fff;
                        &.needClick {
                            cursor: pointer;
                            color: #ff6235;
                        }

                    }
                }
                .placeblank {
                    color: #999;
                    text-align: left;
                    text-decoration: underline;
                    cursor: pointer;
                }
            }
            .el-button--medium {
                width: 290px;
                background-color: #ff6235;
                font-size: 17px;
            }
            .el-button--primary {
                border-color: #ff6235;
                margin-top: 8px;
                height: 40px;
            }
            .movel {
                a {
                    color: #ff6235;
                }
            }

        }
    }
</style>
<style lang="scss">
    .registered {
        .content {
            .el-form {
                .el-input__inner {
                    border-left: none;
                    border-right: none;
                    border-top: none;
                    font-size: 15px;
                    padding: 0;
                }
                .is-checked {
                    .el-checkbox__inner {
                        background-color: #2ab519;
                        border-color: #2ab519;
                        &:hover {
                            border-color: #2ab519;
                        }
                    }
                }
                .el-checkbox__inner {
                    &:hover {
                        border-color: #2ab519;
                    }
                }
                .el-checkbox__label {
                    font-size: 13px;
                    color: #333;
                }
                ::-webkit-input-placeholder {
                    color: #999;
                }
                :-moz-placeholder {
                    color: #999;
                    opacity: 1;
                }
                ::-moz-placeholder {
                    color: #999;
                    opacity: 1;
                }
                :-ms-input-placeholder {
                    color: #999;
                }

            }
            .el-form-item__content {
                text-align: center;
            }
            .el-form-item {
                &:nth-last-child(2) {
                    margin-bottom: 0;
                }
            }
            .movel {
                label {
                    margin-left: -55px;
                    .el-checkbox__label {
                        color: #333;
                    }
                }

            }
        }
    }
</style>